<!-- uploaderFileReader -->
<style lang="less">
.pic-list{
  li{
    img{
      width:100%;
    }
  }
}
</style>
<template>
<div>
  <div><input type='file' accept="image/gif, image/jpeg, image/jpg, image/png" multiple="multiple" @change="getPic"></div>
  <ul class="pic-list">
    <template v-for="item in imgList">
      <li><img :src="item"></li>
    </template>
  </ul>
  <br/>
  <div class="btn btn-default" @click="WEIXIN_uploadImg">微信上传图片</div>
</div>
</template>

<script>
export default {
  name: 'uploaderFileReader',
  data(){
    return{
      imgList:[],
      wxImgList:[],
      imgListabase:[],
      maxSize:0
    }
  },
  methods:{
    getPic(){
      var targetImg = event.target,
          _this = this,
          maxlength = parseInt(this.imgList.length + targetImg.files.length);
      if (maxlength > 9) {
        this.$vux.toast.text('最多上传9张图片')
        return false;
      };
      console.log(targetImg.files,"#")
      for(var i=0;i<targetImg.files.length;i++){　
        var reader = new FileReader();
        reader.readAsDataURL(targetImg.files[i]);
        reader.onload = function(e){
          console.log(reader)
          var dataURL = e.target.result;
          _this.imgList.push(dataURL)
          console.log("复制url")
          _this.$emit('input', _this.imgList)
        };
        reader.onloadend = function() {
          console.log('接口请求，上传结束了');
        };
      }
    },
    WEIXIN_uploadImg: function(){
      var self = this;
      let currentSize = this.wxImgList.length;
      let count = this.maxSize === 0 ? 9 : this.maxSize - currentSize;
      this.jWeixin.chooseImage({
        count: count, // 默认9
        sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
        success: function(res) {
          var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          if (self.wxImgList.length + localIds.length > count) {
            self.Toast({
              message: "最多上传9张图片."
            });
            return false;
          }
          localIds.forEach(li => {
            self.wxImgList.push(li);
          });
          self.getLocalImgDataC(currentSize);
        }
      });
    },
    getLocalImgDataC: function(index) {
      var self = this;
      this.jWeixin.getLocalImgData({
        localId: self.wxImgList[index], // 图片的localID
        success: function(res) {
          let localData = res.localData;
          if (window.__wxjs_is_wkwebview) {
            var imgbase64 = localData.substr(22, localData.length);
            self.wxImgList.splice(index, 1, localData);
            self.imgListabase.push(imgbase64);
          } else {
            self.imgListabase.push(localData);
          }
          self.getLocalImgDataC(index + 1);
          _this.$emit('input', _this.imgListabase)
        }
      });
    },
  }
}
</script>